<template>
	<div class="anonymous">
		<div class="header">
			<image class="logo1" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousPoster.png" mode="widthFix"></image>
			
		</div>
		
		<!-- <div class="logo-wrapper">
			<div class="logo">
				
			</div>
		</div> -->
		<div class="content-main">
			<!-- <image class="logo2" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousDetailBg.png" mode="widthFix"></image> -->
			<div>{{topicInfo.topic?topicInfo.topic:''}}</div>
		</div>
		<!-- 列表end -->
		<div class="btn-container">
			<div class="btn-wrapper">
				<div class="btn-left" >
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/personDefault.png" mode="aspectFill"></image>
					<div>
						<input type="text" placeholder-style="color:#fff" v-model="content"  placeholder="匿名哔哔一下"/>
					</div>
				</div>
				<div class="btn-right" @click="sendAnonymousMessageToTopic">
					确定
				</div>
			</div>
			<div class="btn-go" @click="toAnonymous">我也要玩</div>
		</div>
		
		<!--底部浮动栏-->
		<view class="bottom-fiex-content">
			<view class="fiex-content-left">
				<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/fiex-icon.png">
			</view>
			<view class="fiex-content-center">
				<p>哔哔机</p>
				<text>一个属于年轻人瞎哔哔的圈子</text>
			</view>
			<view class="fiex-content-right" @click="toHome">
				进圈
			</view>
		</view>
	</div>
</template>

<script>
	let defaultJpg=require('../../../../static/img/quan-active.png');
	export default {
		data() {
			return {
				defaultJpg,
				show:false,
				content:'',
				topicId:'',//主题id
				pageNum:1,
				topicInfo:'',//主题信息
				listData:[],
				userId:''//用户本身的id
			};
		},
		methods:{
			toAnonymous(){
				uni.navigateTo({
					url:'/pages/notice/anonymous/anonymous'
				})
			},
			onpopup(){
			    if (this.show){
			        this.show = false;
					this.content=''
			    } else {
			        this.show = true;
			    }
			
			},
			async getMyTopicMessageList(){
				//获取我的主题留言列表
				let params={
					page:this.pageNum,
					limit:10,
					user_token:uni.getStorageSync('userToken'),
					topic_id:this.topicId
				}
				let res=await this.$api.getMyTopicMessageList(params);
				if(res.data.level=='success'){
					this.listData=[...this.listData,...res.data.data.message_info];
					this.topicInfo=res.data.data.topic_info;
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
				
			},
			async sendAnonymousMessageToTopic(){
				//留言
				let params={
					user_token:uni.getStorageSync('userToken'),
					content:this.content,
					topic_id:this.topicId
				}
				let res=await this.$api.sendAnonymousMessageToTopic(params);
				
				if(res.data.level=='success'){
					this.show=false;

					this.listData.unshift(res.data.data);
					this.content=''
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			delMyTopicMessage(item,index){
				//删除留言
				let _this=this
				uni.showModal({
					title:'删除留言？',
					success: function (res) {
						if (res.confirm) {
							_this.delMyTopicMessageHandle(item,index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
				
			},
			async delMyTopicMessageHandle(item,index){
				let params={
					user_token:uni.getStorageSync('userToken'),
					id:item.id
				}
				let res=await this.$api.delMyTopicMessage(params);
				if(res.data.level=='success'){
					this.listData.splice(index,1)
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			toHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
			
		},
		onLoad(options) {
			this.topicId=options.topicId;
			this.getMyTopicMessageList();
			if(options.inviteId){
				//邀请人的用户id，新用户授权时带上
				this.$bus.$data.inviteId=options.inviteId
			}
			this.userId=uni.getStorageSync('userId')
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			path: `/pages/notice/anonymous/anonymousDetail/anonymousDetail?topicId=${this.topicId}&inviteId=${this.userId}`
		  }
		},
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';

	.anonymous{
		background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousBg.png');
		width: 100%;
		height: 100vh;
		position: relative;
		.header{
			@include flexWrap();
			image{
				width: 80vw;
				margin-top:-80rpx;
			}
		}
		.content-main{
			width: 80vw;
			margin-left:10vw;
			background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousDetailBg.png');
			background-size: 100% 100%;
			min-height: 300rpx;
			@include flex()
		}
		
		.logo-wrapper{
			@include flex();
			margin-top:-60rpx;
			.logo{
				background-color: rgba(255,255,255,0.5);
				border-radius: 20rpx;
				height: 60rpx;
				width: 40vw;
			}
		}

		
		.btn-container{
			width: 100vw;
			box-sizing: border-box;
			@include flexWrap();
		}
		.btn-wrapper{
			width: 80vw;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			background: rgba(0,0,0,.5);
			border-radius: 20rpx;
			@include flex(space-between);
			.btn-left{
				@include flex(flex-start);
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				&>div{
					margin-left: 20rpx;
					height:32rpx;
					font-size:32rpx;
					color:rgba(255,255,255,1);
					line-height:32rpx;
				}
			}
			.btn-right{
				width:148rpx;
				height:102rpx;
				text-align: center;
				font-size:32rpx;
				line-height:102rpx;
				border-radius:16rpx;
				background-color: #FFE916;
				border:6rpx solid rgba(0,0,0,1);
			}
			
		}
		
		.btn-go{
			margin-top:20rpx;
			height:88rpx;
			text-align: center;
			font-weight: 600;
			font-size: 28rpx;
			line-height: 88rpx;
			width:calc(80vw - 300rpx) ;
			
			background:#fff;
			border: 4rpx solid #000000;
			border-radius:16rpx;
		}
		
		.register-wrapper{
			width: 80vw;
			min-height: 500rpx;
			position: relative;
			.header-popup{
				image{
					width:40rpx;
					height: 40rpx;
				}
				margin:20rpx;
			}
			.tit{
				text-align: center;
				color:#292929;
				font-weight:600;
				font-size: 36rpx;
				line-height: 36rpx;
				
			}
			textarea{
				// padding:20rpx;
				margin: 20rpx;
				width: auto;
				box-sizing: border-box;
			}
			.desc{
				text-align: center;
				color:#6F7073;
				font-size:28rpx;
				line-height: 28rpx;
				margin:40rpx auto;
			}
			.tips{
				text-align: right;
				font-size: 20rpx;
				margin-top:40rpx;
				margin-right: 20rpx;
			}
			.btn{
				position: absolute;
				bottom: 30rpx;
				background: #FFE226;
				height:88rpx;
				text-align: center;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 88rpx;
				width:calc(80vw - 300rpx) ;
				margin:60rpx 0 60rpx 150rpx ;
				background:rgba(255,226,38,1);
				border-radius:16rpx;
			}
			
		}
		
		
		
		.bottom-fiex-content{
			position: fixed;
			width: calc(100vw - 60rpx);
			bottom: 0;
			left: 0;
			padding: 20rpx 30rpx;
			background: rgba(0,0,0,0.5);
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.fiex-content-left{
				width: 94rpx;
				height: 94rpx;
			}
			.fiex-content-center{
				color: #FFFFFF;
				padding: 0 20rpx;
				max-width: calc(100% - 218rpx);
				p{
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					margin-bottom: 10rpx;
				}
				text{
					font-size: 24rpx;
				}
			}
			.fiex-content-right{
				margin-left: auto;
				width: 124rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #FFE916;
				border: 4rpx solid #000000;
				font-size: 32rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>
